<template>
    <view class="bindingPhone" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="绑定手机号"></nav-bar>
        <view class="con" v-if="!phone">
            <view class="text">您未绑定手机号</view>
            <button open-type="getPhoneNumber" @getphonenumber=" getPhoneNumber " plain="true"
                class="btn1">微信授权绑定手机号</button>
            <view class="btn2" @click=" questionPopup = true">其他手机号绑定</view>
        </view>
        <view class="con" v-else>
            <view class="text">​您已绑定手机号</view>
            <view class="phone">{{ phone }}</view>
            <view class="btn3" @click=" unbindUserPhone ">解除绑定</view>
            <view class="btn2" @click=" questionPopup = true">其他手机号绑定</view>
        </view>
        <u-popup :show=" questionPopup " @close="questionPopup = false" :round=" 30 " closeable>
            <view class="popup-content">
                <view class="label">手机号</view>
                <u-input placeholder="请输入您的手机号" border="surround" v-model=" userPhone "></u-input>
                <view class="label">验证码</view>
                <u-input placeholder="请输入验证码" border="surround" v-model=" phoneCode ">
                    <template slot="suffix">
                        <u-code ref="uCode" @change=" codeChange "></u-code>
                        <u-button @tap=" getCode " :text=" tips " type="success" size="mini"></u-button>
                    </template>
                </u-input>
                <view class="btn" @click=" handleuserBindingPhone ">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    findUserPhone,
    getWxPhone,
    userBindingPhone,
    unbindUserPhone,
    sendPhoneCode,
} from '@/api/index.js'
import {
    mapGetters
} from 'vuex'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            imgUrl: this.$imgUrl,
            userId: uni.getStorageSync('userId'),
            phone: '',
            userPhone: '',
            phoneCode: '',
            tips: '获取验证码',
            questionPopup: false,
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    onLoad () {
        this.init()
    },
    onShow () {

    },
    methods: {
        codeChange (text) {
            this.tips = text;
        },
        getCode () {
            if (this.$refs.uCode.canGetCode) {
                if (!uni.$u.test.mobile(this.userPhone)) {
                    uni.$u.toast('请输入正确手机号')
                    return
                }
                let params = {
                    phone: this.userPhone,
                    userId: this.userInfo.userId,
                }
                sendPhoneCode(params).then((res) => {
                    // uni.hideLoading();
                    // 这里此提示会被this.start()方法中的提示覆盖
                    uni.$u.toast('验证码已发送');
                    // 通知验证码组件内部开始倒计时
                    this.$refs.uCode.start();
                })
            } else {
                // uni.$u.toast('倒计时结束后再发送');
            }
        },
        init () {
            findUserPhone({ userId: this.userInfo.userId }).then((res) => {
                this.phone = res.data
            })
        },
        // 输入绑定手机号
        handleuserBindingPhone () {
            let userBindingPhoneParams = {
                phone: this.userPhone,
                code: this.phoneCode,
                phoneType: 1,
                userId: this.userInfo.userId,
            }
            if (!uni.$u.test.mobile(this.userPhone)) {
                uni.$u.toast('请输入手机号')
                return
            }
            if (!this.phoneCode) {
                uni.$u.toast('请输入验证码')
                return
            }
            userBindingPhone(userBindingPhoneParams).then((res) => {
                this.questionPopup = false
                this.init()
            })
        },
        // 微信授权绑定手机号
        getPhoneNumber (e) {
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                let params = {
                    code: e.detail.code,
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                }
                getWxPhone(params).then((res) => {
                    let userBindingPhoneParams = {
                        phone: res.data,
                        phoneType: 0,
                        userId: this.userInfo.userId,
                    }
                    return userBindingPhone(userBindingPhoneParams)
                }).then((res) => {
                    this.init()
                })
            } else {
            }
        },
        // 解绑手机号
        unbindUserPhone () {
            unbindUserPhone({ userId: this.userInfo.userId }).then((res) => {
                this.init()
            })
        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.bindingPhone {
    height: 100vh;
    padding: 0 48rpx 48rpx;
    background: #e3e8ff;

    .con {
        padding-top: 400rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .text {
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 40rpx;
            color: #333333;
            line-height: 47rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
        }

        .phone {
            margin-top: 32rpx;
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 40rpx;
            color: #333333;
            line-height: 47rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
        }

        .btn1 {
            margin-top: 80rpx;
            width: 622rpx;
            height: 100rpx;
            background-color: #545dde;
            font-weight: 500;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
            border: none;
        }

        .btn2 {
            margin-top: 32rpx;
            width: 622rpx;
            height: 100rpx;
            border: 2rpx solid #e7e9e9;
            background-color: #fff;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
        }

        .btn3 {
            margin-top: 80rpx;
            width: 622rpx;
            height: 100rpx;
            background-color: #545dde;
            font-weight: 500;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
            border: none;
        }
    }

    .popup-content {
        padding: 64rpx 32rpx;

        .label {
            text-align: left;
            padding: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #333333;
            line-height: 38rpx;
            font-style: normal;
            text-transform: none;
        }

        .btn {
            width: 100%;
            height: 88rpx;
            background: #545DDE;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;

        }
    }

}
</style>